<!-- pages/order/list.vue -->
<template>
  <view class="order-page">
    <view class="nav-tabs">
      <text
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ tab }}
      </text>
    </view>

    <mOrderList
      :orderType="currentTab"
      :order="orderList"
      :status="constValue"
      @change="handlerChangeOrder"
      @pay="handlerPay"
    ></mOrderList>
  </view>
</template>

<script>
import mOrderList from '@/components/mOrderList/index'

export default {
  components: {
    mOrderList
  },

  data() {
    return {
      currentTab: -1,
      constValue: {},
      tabs: ['待付款', '待发货', '待收货', '待评价', '全部'],
      orderList: [],
      status: -1,
      initialLoad: false // 新增标志位
    }
  },

  onLoad(e) {
    this.user_id = parseInt(getApp().globalData.userInfo.id)
    this.getConstData(parseInt(e.tab))
  },

  onShow() {
    // 只有第一次加载时不调用，后续页面显示时调用
    if (this.initialLoad) {
      this.getOrderData()
    } else {
      this.initialLoad = true
    }
  },

  watch: {
    currentTab: {
      handler(n) {
        this.updateStatusAndFetch(n)
      },
      immediate: true // 初始化时立即执行
    }
  },

  methods: {
    switchTab(index) {
      this.currentTab = index
    },

    // 更新状态并获取数据
    updateStatusAndFetch(tabIndex) {
      let status = -1
      switch (tabIndex) {
        case 0:
          status = this.constValue?.NotPaid?.key ?? 0
          break
        case 1:
          status = this.constValue?.NotShipped?.key ?? 1
          break
        case 2:
          status = this.constValue?.Shipped?.key ?? 2
          break
        case 3:
          status = this.constValue?.SignedFor?.key ?? 3
          break
        case 4:
          status = -1
          break
      }
      this.status = status

      // 只有在constValue已加载时才获取数据
      if (Object.keys(this.constValue).length > 0) {
        this.getOrderData()
      }
    },

    async getConstData(tab) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/const'
      })

      this.constValue = res.const || {}
      this.currentTab = tab
      // const数据加载后会自动触发watch中的fetch
    },

    async getOrderData() {
      uni.showLoading({
        title: '正在加载....'
      })

      try {
        const { data: res } = await uni.request({
          url: this.$domain.data + '/getOrderListByStatus/' + this.user_id + '?status=' + this.status,
          header: getApp().globalData.header
        })

        if (res.status != 200) {
          this.$checkStatus(res.status)
          return
        }

        this.orderList = res.data || []
      } catch (error) {
        console.error('获取订单数据失败:', error)
      } finally {
        uni.hideLoading()
      }
    },

    handlerChangeOrder(e) {
      this.status = e.status
      this.getOrderData()
    },

    handlerPay(e) {
      this.status = e.status
      this.getOrderData()
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-tabs {
  display: flex;
  background: #fff;
  padding: 20upx 0;

  text {
    flex: 1;
    text-align: center;
    font-size: 30upx;
    color: #666;
    padding: 20upx 0;
    position: relative;

    &.active {
      color: #007aff;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80upx;
        height: 4upx;
        background: #007aff;
      }
    }
  }
}
</style>
